<template>
	<!-- 产品分析 -->
	<basic-container>
		<!-- 明星产品 -->
		<div class="product-analysis-title">明星产品</div>
		<el-table
			:data="starTableData"
			:header-cell-style="{
				background: 'rgb(255, 191, 191)',
				color: 'rgb(44,44,44)',
			}"
			stripe
			v-loading="starTableLoading"
		>
			<el-table-column prop="prodLoveName" label="最受客户喜爱产品" align="center"></el-table-column>
			<el-table-column prop="prodRecommendName" label="最受推荐产品" align="center"></el-table-column>
			<el-table-column prop="todayProdLoveName" label="今日最受客户喜爱产品" align="center"></el-table-column>
			<el-table-column prop="todayProdRecommendName" label="今日最受推荐产品" align="center"></el-table-column>
		</el-table>
		<!-- 产品排序 -->
		<el-form :inline="true" :model="searchForm" class="madp-searchbox">
			<el-form-item label="产品排序">
				<el-button type="primary" @click="handleSearch(0)">浏览次数排序</el-button>
				<el-button type="primary" @click="handleSearch(1)">推荐次数排序</el-button>
				<el-button type="primary" @click="handleSearch(2)">购买次数排序</el-button>
			</el-form-item>
			<div>
				<el-form-item label="产品类型">
					<el-input v-model.trim="searchForm.productType" placeholder="请输入产品类型"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch(3)">搜索</el-button>
					<el-button @click="clearSearch">重置</el-button>
				</el-form-item>
			</div>
		</el-form>

		<!-- 关键词列表数据 -->
		<div>
			<el-table
				:data="productList"
				:header-cell-style="{
					background: 'rgb(255, 191, 191)',
					color: 'rgb(44,44,44)',
				}"
				stripe
				v-loading="tableLoading"
			>
				<el-table-column prop="prodName" label="产品名称" align="center"></el-table-column>
				<el-table-column prop="prodType" label="产品类型" align="center"></el-table-column>
				<el-table-column prop="opening" label="产品浏览次数" align="center"></el-table-column>
				<el-table-column prop="recommend" label="产品推荐次数" align="center"></el-table-column>
				<el-table-column prop="purchase" label="产品购买次数" align="center"></el-table-column>
				<el-table-column prop="outing" label="产品中途退出次数" align="center"></el-table-column>
			</el-table>
		</div>
		<!-- 列表分页 -->
		<div class="madp-pagination-wrap">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.current"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="page.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
	</basic-container>
</template>
<script>
import {
	getProductcontact, //分页查询
	getProductLove, //推荐产品
} from '@/api/operation-manage/product-analysis.js';
export default {
	name: 'productAnalysis',
	data() {
		return {
			productList: [],
			tableLoading: true,
			starTableLoading: true,
			starTableData: [],
			searchForm: {
				productType: '',
				purchase: false,
				recommend: false,
				opening: false,
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			currentRow: {},
		};
	},
	mounted() {
		this.getproductList();
		this.getLoveList();
	},
	methods: {
		//条件筛选
		handleSearch(e) {
			switch (e) {
				case 0:
					this.searchForm.opening = true;
					this.searchForm.recommend = false;
					this.searchForm.purchase = false;
					break;
				case 1:
					this.searchForm.opening = false;
					this.searchForm.recommend = true;
					this.searchForm.purchase = false;
					break;
				case 2:
					this.searchForm.opening = false;
					this.searchForm.recommend = false;
					this.searchForm.purchase = true;
					break;
				case 3:
					this.searchForm.opening = false;
					this.searchForm.recommend = false;
					this.searchForm.purchase = false;
					break;
			}
			this.getproductList();
		},
		clearSearch() {
			this.searchForm.productType = '';
			this.getproductList();
		},
		searchList() {
			this.page.current = 1;
			this.getproductList();
		},
		getLoveList() {
			getProductLove()
				.then((res) => {
					this.starTableLoading = false;
					if (res.data && res.data.code === 0) {
						let arr = [];
						let obj = res.data.data;
						arr[0] = obj;
						this.starTableData = arr;
					}
				})
				.catch(() => {
					this.starTableLoading = false;
				});
		},
		getproductList() {
			let data = {
				size: this.page.size,
				current: this.page.current,
				productType: this.searchForm.productType, //产品类型
				purchase: this.searchForm.purchase, //购买类型
				recommend: this.searchForm.recommend, //推荐次数
				opening: this.searchForm.opening, //浏览次数
			};
			getProductcontact(data)
				.then((res) => {
					this.tableLoading = false;
					if (res.data && res.data.code === 0) {
						this.productList = res.data.data.records;
						this.page.total = res.data.data.total;
					}
				})
				.catch(() => {
					this.tableLoading = false;
				});
		},
		// 分页
		handleSizeChange(val) {
			this.page.size = val;
			this.getproductList();
		},
		handleCurrentChange(val) {
			this.page.current = val;
			this.getproductList();
		},
	},
};
</script>
<style lang="scss" scoped>
body {
	max-height: 1600px;
}
.madp-pagination-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 20px;
}
.product-analysis-title {
	font-size: 14px;
	color: #606266;
}
.madp-searchbox {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
</style>
